import { Button, Layout, Menu, Modal } from 'antd'
import SubMenu from 'antd/lib/menu/SubMenu'
import { observer } from 'mobx-react'
import React, { ReactNode, useEffect, useState } from 'react'
import { Link, Redirect, Route, Switch, useLocation } from 'react-router-dom'
import { BrowserRouter as Router } from 'react-router-dom'
// import { Role } from '../../Model/role'
import useStores from '../../Stores'
import './index.scss'
import { MenuList, routes } from './route'

const { Header, Content, Sider } = Layout

const Home = () => {
  const keyArray: string[] = []
  const location = useLocation()
  const path = location.pathname.split('/').filter((item) => item)
  path.reduce((acc, value, index) => {
    if (index < path.length - 1) {
      if (index > 0) {
        keyArray.push(acc + '/' + value)
      }
      return acc + '/' + value
    } else return acc
  }, '')
  const { root } = useStores()
  const [openKey, setOpenKey] = useState<any>(keyArray)

  console.log(root.isLogin, root.role, 'home')
  if (!root.isLogin) {
    return <Redirect to="/" />
  }

  const logout = () => {
    Modal.confirm({
      okText: '注销',
      cancelText: '取消',
      content: <p>是否确定注销登录?</p>,
      onOk: () => root.logout(),
    })
  }

  // 遍历创建Menu函数
  const createMenuItem = (routes: MenuList[]): ReactNode => {
    if (!routes) {
      return null
    }
    return routes.map((route) => {
      if (root.role && route.permission.indexOf(root.role) === -1) {
        return null
      }
      if (route.children) {
        return (
          <SubMenu key={route.url} icon={<route.Icon />} title={route.title}>
            {createMenuItem(route.children)}
          </SubMenu>
        )
      }
      return (
        <Menu.Item key={route.url} icon={<route.Icon />}>
          <Link to={route.url}>{route.title}</Link>
        </Menu.Item>
      )
    })
  }

  return (
    <Router>
      <Layout className="home-page">
        <Sider width={200} className="site-layout-background">
          <Menu
            theme="dark"
            mode="inline"
            defaultSelectedKeys={[location.pathname]}
            onOpenChange={setOpenKey}
            openKeys={openKey}
          >
            {createMenuItem(routes)}
          </Menu>
        </Sider>
        <Layout>
          <Header className="header">
            <Button
              className="logout-btn"
              type="primary"
              danger
              onClick={logout}
            >
              注销
            </Button>
          </Header>
          <Layout style={{ padding: '10px 24px 24px' }}>
            <Content className="content">
              {/* <Switch>
                <Route
                  exact
                  path="/home/report/inventory"
                  component={Inventory}
                />
                <Route exact path="/home/report/warning" component={Warning} />
                <Route exact path='/home/storage/in_out' component={InventoryInOut} />
                <Route
                  exact
                  path="/home/storage/inventoryClassify"
                  component={InventoryClassify}
                />
                <Route
                  exact
                  path="/home/manage/account"
                  component={AccountManage}
                />
                <Route
                  exact
                  path="/home/manage/record"
                  component={RecordManage}
                />
                <Route
                  exact
                  path="/home/manage/storage"
                  component={StorageManage}
                />
                <Route
                  exact
                  path="/home/storage/goods_manage"
                  component={GoodsManage}
                />
              </Switch> */}
            </Content>
          </Layout>
        </Layout>
      </Layout>
    </Router>
  )
}

export default observer(Home)
